<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="../static/css/common.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/cheer_1.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="../static/js/jquery-1.12.3.min.js"></script>
    <script src="../static/js/flexible.min.js"></script>
    <script src="../static/js/common.min.js"></script>
    <script src="../static/js/cheer_1.min.js"></script>
    <script>
        //获取第x个加入
        let getNumberAjax = () => {
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(number){
                    setNumber(data.number);//执行插入名次,传入名次
                    console.log(data);//可修改，success处理
                },
                error: function(data){
                    console.log(data);
                }
            });
        }
        //获取视频链接
        let getVideoAjax = () => {
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(data){
                    setVideo(data.src);//执行插入视频链接,传入视频链接
                    console.log(data);//可修改，success处理
                },
                error: function(data){
                    console.log(data);
                }
            });
        }
        //获取是否已点赞
        let getFavorAjax = () => {
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(data){
                    setFavor(data.isFavor);//true or false
                    console.log(data);//可修改，success处理
                },
                error: function(data){
                    console.log(data);
                }
            });
        }
        //点赞
        let favorAjax = () => {
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(data){
                    console.log(data);//可修改，success处理
                },
                error: function(data){
                    console.log(data);
                }
            });
        }
        //获取头像
        let headAjax = () => {
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(data){
                    $('.head').attr('src',data.imgLink);
                    console.log(data);//可修改，success处理
                },
                error: function(data){
                    console.log(data);
                }
            });
        }

        //微信朋友圈分享，参考https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
        // wx.config({
        //     debug: false,
        //     appId: '@appId',
        //     timestamp: '@timestamp',
        //     nonceStr: '@noncestr',
        //     signature: '@signature',
        //     jsApiList: ['updateTimelineShareData']
        // });
        // wx.ready(function () {//需在用户可能点击分享按钮前就先调用
        //     wx.updateTimelineShareData({ 
        //         title: '', // 分享标题
        //         link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        //         imgUrl: '', // 分享图标
        //         success: function () {
        //             // 设置成功
        //         }
        //     });
        // });
        $(function(){
            //显示新手教程
            //showCheerGuide();
            //隐藏新手教程
            //hideCheerGuide();
            $(".invitation").on("click",function(){
                //微信朋友圈分享
                console.log("微信朋友圈分享");
                showCheerGuide();
            });
            //获取用户信息
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(data){
                    $('.user-head').html('<img src="'+data.url+'" /><p>'+data.name+'</p>')
                },
                error: function(data){
                    console.log(data);
                }
            });
        });
    </script>
    <title>51Talk之星 中华少年说</title>
</head>
<body>
    <div class="cheer1-container">
        <div class="main">
            <p class="main-title">
                我国共有<span class="main-title-number">1000</span>个非物质文化遗产，居全球第<span class="main-title-number">1</span>位<br>
                随着传承人减少，每年<span class="main-title-number">100</span>个非遗正在消失
            </p>
            <div class="main-header">
                <img class="head" src="../static/images/cheer1/head.png" />
                <p class="header-word">
                    我是第 <span class="header-number">2839230</span> 位加入<br>
                    非遗文化保护的小使者！
                </p>
            </div>
            <div class="main-screen">
                <img class="screen-play" src="../static/images/cheer/play.png" />
                <img class="poster-img" src="../static/images/cheer1/poster.png" />
                <video class="screen-video" src="http://demo.lanrenzhijia.com/demo/51/5183/demo/vedio/sintel.mp4" poster="../static/images/cheer1/poster.png" playsinline controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
            </div>
            <div class="user-head">
                <img src="../static/images/cheer/head.png" />
                <p>51Talk 恭喜您</p>
            </div>
            <div class="main-heart"></div>
            <p class="main-word">为TA助威</p>
        </div>
        <div class="invitation">
            
        </div>
    </div>
    <iframe id="cheer-guide" name="cheer-guide" src="cheerGuide.html"></iframe>
</body>
</html>